<template>
  <a-modal
    title="操作"
    style="top: 20px;"
    :width="800"
    v-model="visible"
    cancelText="取消"
    okText="提交"
    @cancel="dialogStatus==='add'?doShowModalAddCancle():doShowModalEditCancle()"
    @ok="dialogStatus==='add'?doShowModalAdd():doShowModalEdit()"
  >
    <a-form :form="form" name="horizontal_login">
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户名" hasFeedback validateStatus="success">
        <a-input placeholder="用户名" v-model="mdl.username" name="username" id="username" v-decorator="['username', {}]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户id" hasFeedback validateStatus="success">
        <a-input placeholder="用户id" v-model="mdl.userId" id="userId" v-decorator="['userId', {}]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="密码" hasFeedback validateStatus="success">
        <a-input placeholder="密码" v-model="mdl.password" id="password" v-decorator="['password', {}]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="真实姓名" hasFeedback validateStatus="success">
        <a-input placeholder="真实姓名" v-model="mdl.realname" id="realname" v-decorator="['realname', {}]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="状态" hasFeedback validateStatus="warning">
        <a-select v-model="mdl.locked" id="locked" v-decorator="['locked', {}]">
          <a-select-option value="0">正常</a-select-option>
          <a-select-option value="1">锁定</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="性别" hasFeedback validateStatus="warning">
        <a-select v-model="mdl.sex" id="sex" v-decorator="['sex', {}]">
          <a-select-option value="0">男</a-select-option>
          <a-select-option value="1">女</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="部门" hasFeedback validateStatus="warning">
        <a-select v-model="mdl.dept" id="dept" v-decorator="['dept', {}]">
          <a-select-option value="0">男</a-select-option>
          <a-select-option value="1">女</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="电话" hasFeedback>
        <a-textarea :rows="5" v-model="mdl.phone" placeholder="..." id="phone" v-decorator="['phone', {}]"/>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="选择角色" hasFeedback>
        <a-select
          mode="multiple"
          placeholder="Inserted are removed"
          :value="selectedItems"
          style="width: 100%"
          @change="handleChange"
          id="roles"
          v-decorator="['roles', {}]"
        >
          <a-select-option v-for="item in OPTIONS" :key="item.roleId" :value="item.roleId">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
  import { addUser, updateUser, getRoles } from '@/api/user'
  export default {
    name: 'AddAndEdit',
    data () {
      return {
        visible: false,
        mdl: {},
        dialogStatus: '',
        OPTIONS: [],
        selectedItems: [],
        selectedItems2: []
      }
    },
    beforeCreate () {
      this.form = this.$form.createForm(this)
      console.log('form::', this.form)
    },
    created () {
     getRoles().then(res => {
       debugger
       console.log('getRoles.call()', res)
       const result = res.result.data
       result.forEach((r) => {
         this.OPTIONS.push({
           roleId: r.roleId,
           name: r.name
         })
       })
       console.log('------' + this.OPTIONS)
     })
    },
    computed: {
      objectToJson: {
        get () {
          // debugger
          const meta = JSON.stringify(this.mdl.meta)
          return meta
          // return this.bank_account.replace(/\s/g, ''())
        },
        set (val) {
          // this.mdl.meta = val
        }
      }
    },
    methods: {
      add () {
        debugger
        this.$message.info(this.visible, '-')
        this.edit({ id: 0 })
      },
      edit (record) {
        debugger
        this.$message.info(record)
        this.mdl = Object.assign({}, record.data)
        this.visible = true
        this.$nextTick(() => {
          this.form.setFieldsValue({ ...record.data })
        })
      },
      doShowModalEditCancle () {
        this.visible = false;
        this.dialogStatus = ''
        console.log('edit cancel')
      },
      doShowModalAdd () {
        debugger
        this.$message.info('创建')
        this.dialogStatus = 'add'
        this.form.validateFields((err, antMenu2) => {
          debugger
          if (!err) {
            console.log('antMenu2', antMenu2)
          }
          this.$message.info(antMenu2)
          if (err) {
            return;
          }
          // console.log('Received antMenu2 of form: ', antMenu2);
          this.$message.info('modal form submit', antMenu2)
          // console.log('params:', antMenu2);
          this.loading = true;
          addUser(antMenu2).then(res => {
            console.log('getUserList.call()', res)
            this.$refs.table.refresh()
          })
          this.form.resetFields();
          this.visible = false;
          this.fetchs({
              pageSize: 5,
              pageNum: 1
          });
          this.fetchs2({
              pageSize: 5,
              pageNum: 1
          });
        });
      },
      doShowModalEdit () {
        this.visible = false;
        this.dialogStatus = ''
        console.log('add cancel')
        debugger
        this.$message.info('更新')
        this.form.validateFields((err, antMenu2) => {
          debugger
          if (!err) {
            console.log('antMenu2', antMenu2)
          }
          this.$message.info(antMenu2)
          if (err) {
            return;
          }
          // console.log('Received antMenu2 of form: ', antMenu2);
          this.$message.info('modal form submit', antMenu2)
          // console.log('params:', antMenu2);
          this.loading = true;
          updateUser(antMenu2).then(res => {
            console.log('getUserList.call()', res)
            this.$refs.table.refresh()
          })
          this.form.resetFields();
          this.visible = false;
          this.fetchs({
              pageSize: 5,
              pageNum: 1
          });
          this.fetchs2({
              pageSize: 5,
              pageNum: 1
          });
        });
      },
      handleChange (v) {
        this.selectedItems = v
        console.log(this.selectedItems)
      }
    }
  }
</script>

<style>
</style>
